<template>
  <div class="common-layout">
    <el-container class="homeContainer">
      <el-header height="60px" class="homeHeader">
        <Header />
      </el-header>

      <el-main class="homeMain">
        <!-- 这里用 router-view 来展示不同的主内容页面 -->
        <router-view></router-view>
      </el-main>

      <el-footer v-show="isNoAdmin" height="20%" class="footer">
        <Footers />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Header from '@/components/header/Header.vue';
import Footers from '@/components/footer/Footer.vue';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
const route = useRoute();

const isNoAdmin = computed(() => {
  // 如果路由元信息中设置了hideFooter为true，则隐藏页脚
  const shouldHideFooter = route.meta.hideFooter || false

  // 只有管理员且路由需要隐藏页脚时才隐藏
  return !shouldHideFooter
})
</script>


<style scoped>
/* 原来的样式保留，这里主要是公共布局的样式 */
.common-layout {
  min-height: 100vh;
  /* background-color: #ffffff; */
}

.homeContainer {
  background-color: rgb(255, 255, 255);
}

.homeHeader {
  background-color: #40a0ff40;
  box-shadow: 0 2px 12px 0 rgba(145, 145, 145, 0.1);
  padding: 0;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.homeMain {
  margin: 0 80px;

}

.footer {
  margin: 0;
  padding: 0;

  /* background-color: #f5f5f5; */
}
</style>